<script setup>
import UserInfo from "./child/UserInfo";
import UserStatus from "./child/UserStatus";
import vanNoticeBar from "./child/vanNoticeBar.vue";
import CellList from "./child/CellList.vue";
import bindPhonePopup from "./child/bindPhonePopup.vue";

import { getToken } from "@/utils/auth";
import { useUserStore } from "@/store/modules";

import { computed } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";


const userStore = useUserStore();

const userInfo = computed(() => userStore.userInfo);


onShow(() => {
  if (getToken()) {
    userStore.getUserInfo();
  }
});
</script>

<template>
  <div class='my'>
    <NavBar :leftArrow="false">个人中心</NavBar>
    <div class="container">
      <UserInfo></UserInfo>

      <UserStatus :userInfo="userInfo"></UserStatus>

      <vanNoticeBar></vanNoticeBar>

      <CellList></CellList>

      <bindPhonePopup></bindPhonePopup>
    </div>
    <Tabbar :active="4"></Tabbar>
  </div>
  <van-toast id="van-toast"></van-toast>
</template>

<style lang='scss' scoped>
::v-deep {

  .van-notice-bar {
    border-radius: 50rpx;
    border-bottom: 1rpx solid rgba(240, 178, 87, 0.4);
    background-color: rgba(0, 0, 0, 0) !important;
  }

  .van-cell {
    color: var(--a-one-text-color);
    background-color: transparent;

    &.van-cell:after {
      border-bottom-color: rgba(198, 198, 198, 0.2);
    }

    &.van-cell--clickable.van-cell--hover {
      background-color: transparent;
    }
  }

  .van-nav-bar {
    background-color: rgba(0, 0, 0, 0) !important;
  }
}

.my {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .container {
    flex: 1;
    padding: 0 30rpx 30rpx;
    overflow: scroll;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>